<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>初识Vue</title>
    <!-- 引入开发版vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
    <!--    1、想让vue工作，就必须创建vue实例，且要传入一个配置对象
            2、root容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法
            3、root容器里的代码被称为【vue模板】

            4、Vue实例和容器是一一对应的；
            5、真实开发中只有一个vue实例，并且会配合着组件一起使用
            6、{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
            7、一旦data中的数据发生改变， 那么模板(页面)中用到该数据的地方也会自动更新 

            注意区分js表达式和js代码（语句）：
            1、js表达式： 一个表达式会产生一个值，可以放在任何一个需要值的地方
                a    a+b    demo(1)  x===y?'a':'b'
            2、js代码（语句） if(){}  for(){}
    -->



    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello,{{name.toUpperCase()}},{{address}}</h1>
    </div>
    <h1>Hi,{{name}}</h1>
    <script type="text/javascript">
        Vue.config.productionTip = false;//去除vue启动控制台提示（没生效）
        //创建vue实例
        const x = new Vue({
            el:'#root',  //el(element)用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串
            data:{ //data用于存储数据，数据供el所指定的容器去使用
                name: "Aurora",
                address: "Qingdao"
            }
        });
    </script>
</body>
</html>